<template>
	<view class="demand-detail-container">
   	<view class="u-p-l-32 u-p-r-32">
			<!-- 需求发布人 -->
		  <view class="demand-detail-desc">
		  	<view class="demand-detail-desc-header">
		  		<text>需求: <text>2023-03-03</text></text>	
		  	</view>
					<!-- 需求发布人详情 -->
		  	<view class="demand-detail-desc-content">
		  		<text class="publish-person">发布人</text>
		  		<view class="publish-person-msg">
		  			<p class="publish-person-msg-item">
		  				<i class="icon icon-video"></i>
		  				<view>
		  					<text>
		  						<text class="username">李嘉图</text>
		  						<text class="position">船长</text>
		  						<text class="country-code">+86</text>
		  						<text class="phone-num">13999999999</text>
		  					</text>
		  					<view class="email">emailaddress@email.com</view>
		  				</view>								
		  			</p>
		  			<p class="publish-person-msg-item u-flex">
		  			  <i class="icon icon-video"></i>
		  				<text class="tag-name">船舶维修保养</text>
		  			</p>
		  		</view>
		  	</view>
		  	 <view class="stat-tag stat-tag-gray">未承接</view>
		  </view>
		  <!-- 承接人信息 -->
		  <view class="successor-container">
				<view class="successor-container-header">
					<text class="successor-container-title">承接人</text>
					<!-- 未添加好友 -->
					<view class="add-friend-btn" @click="$goPage('/demand/successor')">
						<i class="icon icon-video"></i>
						<view class="u-m-l-6">加好友</view>
					</view>
					<!-- 已添加好友 -->
					<view class="add-friend-btn add-friend-btn-success" v-if="false">
						<i class="icon icon-video"></i>
						<view class="u-m-l-6">已添加</view>
					</view>
				</view>	 	
				<!-- 承接人信息 -->
				<p class="publish-person-msg-item">
					<i class="icon icon-video"></i>
					<view>
						<text>
							<text class="username">李嘉图</text>
							<text class="position">船长</text>
							<text class="country-code">+86</text>
							<text class="phone-num">13999999999</text>
						</text>
						<view class="email">emailaddress@email.com</view>
					</view>								
				</p>
		  </view>
			<!-- 拒绝板块 -->
			<view class="refuse-container">
				<text class="refuse-container-title">拒绝理由</text>
				<view class="u-flex u-col-top">
					<u-icon name="error-circle" color="rgba(255, 72, 105, 1)" style="margin-top:4rpx"></u-icon>
					<view class="refuse-text">
						拒绝理由拒绝理由拒绝理由拒绝理由拒绝理由拒绝理由
						拒绝理由拒绝理由拒绝理由拒绝理由拒绝理由拒绝理由拒绝理由
					</view>
				</view>
			</view>
			<!-- 需求内容板块 -->
	    <view class="demand-detail-content">
				<!-- 文本内容 -->
		  	<view class="demand-detail-content-text">
		  		内容内容内容内容内容内容内容内容内容内容内容内容
		  		内容内容内容内容内容内容内容内容内容内容内容内容
		  		内容内容内容内容内容内容内容内容内容内容内容内容
		  	</view>
		  	<!-- 图片 -->
		  	<view class="demand-detail-content-image">
		  		<view v-for="(img, index) in ImgPackJson">
		  			<images-item :item="img" :index="index" :imgjson="ImgPackJson"
		  			:style="imageStyle"
		  			suffix="?imageMogr2/thumbnail/!30p" class="image-item">				
		  			</images-item>
		  		</view>
		  	</view>
		  	<!-- 视频 -->
	      <view class="u-m-t-8 video-container">
	      	<view class="video-cover"
	      	:style="{'width': videoCoverWidth > videoCoverHeight ? '400rpx' : (videoCoverWidth * 400 / videoCoverHeight + 'rpx'),
	      	'height': videoCoverWidth <= videoCoverHeight ? '400rpx': (videoCoverHeight * 400 / videoCoverWidth + 'rpx'),
	      	'background': 'url(https://idock-1305057061.cos.ap-beijing.myqcloud.com/cms/2023-05-12/002034-s5fpmque.jpg)',
	      	'background-size': 'cover'
	      	 }"
	      	>  
	          <!-- 播放图标 -->
	          <view class="video-cover-icon">
	          	<view class="triangle"></view>
	          </view>
	        </view>	 
	      </view>	
				<!-- 指派承接人按钮 -->
				<view class="assign">指派承接人</view>
		  </view>
		</view>
		<!-- 分割 -->
		<view class="divider"></view>
		<!-- 动态内容 -->
		<view class="follow-container">
			<view class="follow-title">动态</view>
			<scroll-view scroll-y style="height:90vh" v-if="false">
				<view v-for="(item,index) in 5">
					<article-item></article-item>
				</view>
			</scroll-view>
			<view class="empty-container">
				<image src="../../../static/a.jpg" class="empty-image"></image>
				<text class="empty-text">暂无任何动态</text>
			</view>
		</view>
	</view>
</template>

<script>
import { defineComponent,reactive, toRefs, onMounted} from "vue"
import ImagesItem from '@/components/images-item/index.vue'
import ArticleItem from '@/components/article-item/index.vue'
	export default defineComponent({
		components: {
			ImagesItem,
			ArticleItem
		},
		setup(props,context) {
			const data = reactive({
				ImgPackJson: [
					{
						Name: '',
						Src: 'https://idock-1305057061.cos.ap-beijing.myqcloud.com/cms/2023-05-12/002034-s5fpmque.jpg'
					},
					// {
					// 	Name: '',
					// 	Src: 'https://idock-1305057061.cos.ap-beijing.myqcloud.com/cms/2023-05-12/002034-s5fpmque.jpg'
					// },
					// {
					// 	Name: '',
					// 	Src: 'https://idock-1305057061.cos.ap-beijing.myqcloud.com/cms/2023-05-12/002034-s5fpmque.jpg'
					// },
					// {
					// 	Name: '',
					// 	Src: 'https://idock-1305057061.cos.ap-beijing.myqcloud.com/cms/2023-05-12/002034-s5fpmque.jpg'
					// },
					// {
					// 	Name: '',
					// 	Src: 'https://idock-1305057061.cos.ap-beijing.myqcloud.com/cms/2023-05-12/002034-s5fpmque.jpg'
					// }
				],
				imageStyle: {
					width1: 330,
					height1: 330,
					width2: 220,
					height2: 220,
				},
				videoCoverWidth: 0,
				videoCoverHeight: 0
			})
			onMounted(()=> {
				//计算视频封面图的大小
				uni.getImageInfo({
					src:'https://idock-1305057061.cos.ap-beijing.myqcloud.com/cms/2023-05-12/002034-s5fpmque.jpg',
					success: (image)=> {
						data.videoCoverWidth = image.width
						data.videoCoverHeight = image.height
					}
				})
			})
			return {
				...toRefs(data)
			}
		}
	})
</script>

<style lang="scss" scoped>
	.demand-detail-container {
		padding: 36rpx 0;
		background-color: #fefefe;
		.demand-detail-desc {
			position: relative;
			background-color: rgba(0,0,0,0.03);
			border-radius: 24rpx;
			&-header {
				display: flex;
				align-items: center;
				padding: 24rpx;
				border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
			}
			&-content {
				padding: 24rpx;
			}
			.stat-tag {
				position: absolute;
				top:0;
				right:0;
				padding: 0 16rpx;
				height: 32rpx;
				background-color: #808080;
				border-radius: 0 24rpx 0 24rpx;
				font-size: 20rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #fff;
				line-height: 32rpx;
			}
			.stat-tag-gray {
				background-color: #808080 ;
			}
			.stat-tag-success {
				background-color: #45D069 ;
			}
		}
		.publish-person {
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(0,0,0,0.3);
			line-height: 33rpx;
			&-msg {
			  &-item {
					display: flex;
					margin-top:12rpx;
					.icon {
						margin-right: 16rpx;
					}
					.username,.country-code,.phone-num,.position,.tag-name{
						height: 39rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #000000;
						line-height: 33rpx;
					}
					.position {
						font-weight: 400;		
					}
				}
			}
		}
		.successor-container {
		  margin-top: 8rpx;
			padding: 24rpx;
			background: rgba(71, 107, 238, 0.1);
			border-radius: 24rpx;
			&-header {
				display:flex;
				justify-content: space-between;
				align-items:center;
			}
			&-title {
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(0,0,0,0.3);
				line-height: 33rpx;
			}
			.add-friend-btn {
				display: flex;
				align-items: center;
				padding: 0 16rpx;
				height: 48rpx;
				background: #476BEE;
				border-radius: 27rpx;
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #FEFEFE;
			}
			.add-friend-btn-success {
				border: 1rpx solid rgba(0,0,0,0.1);
				color: rgba(1,1,1,0.3);
				background-color: transparent;
			}
		}
		.refuse-container {
			padding: 24rpx;
			margin-top: 8rpx;
			background-color: rgba(255, 72, 105, 0.1);
			border-radius: 24rpx;
			&-title {
				font-family: PingFang SC-Regular, PingFang SC;
				color: rgba(0,0,0,0.3);
				line-height: 33rpx;
			}
			.refuse-text {
				margin-left: 16rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #FF4869;
				line-height: 39rpx;
			}
		}
		.demand-detail-content {
			&-text {
				font-size: 32rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
				line-height:42rpx;
				margin-top: 24rpx;
			}
			&-image {
				display: flex;
				flex-wrap: wrap;
			}
			.video-cover {
				position: relative;
				background-color: pink;
				.video-cover-image {
					position: absolute;
					top: 50%;
					left:50%;
					transform: translate(-50%,-50%);
				}
				.video-cover-icon {
					position: absolute;
					top: 50%;
					left:50%;
					z-index: 1;
					transform: translate(-50%,-50%);
					width: 96rpx;
					height: 96rpx;
					background: #FFFFFF;
					border-radius: 96rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					.triangle {
						width:0;
						height: 0;
						border-left: 23rpx solid transparent;
						border-right: 23rpx solid transparent;
						border-bottom: 40rpx solid #476BEE;
						transform: rotate(90deg);
					}
				}
			}
			.assign {
				height: 96rpx;
				margin-top:48rpx;
				background: #476BEE;
				line-height: 96rpx;
				text-align: center;
				font-size: 32rpx;
				font-family: PingFang SC-Semibold, PingFang SC;
				font-weight: 600;
				color: #FEFEFE;
				border-radius: 24rpx;
				
			}
		}
		.divider {
			width: 100%;
			height: 1rpx;
			margin: 48rpx 0;
			background: rgba(0,0,0,0.1);
		}
		.follow-container {
			padding: 0 32rpx;
			.follow-title {
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #000000;
				line-height: 38rpx;
			}
			.empty-container {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-top: 68rpx;
				.empty-image {
					width:160rpx;
					height: 160rpx;
				}
				.empty-text {
					margin-top: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					color:rgba(0,0,0,0.4);
				}
			}
		}
	
	}
</style>
